//
//  AniamtionParameterView.swift
//  SwiftUIDemo
//
//  Created by zhouzuosong on 2020/8/30.
//  Copyright © 2020 Kael. All rights reserved.
//

import SwiftUI

struct AniamtionParameterView: View {
    @State var changeDuration = false

    var body: some View {
        VStack {
            BannerText(pageTitle: "Animation Parameter", text: "设置每个属性", backgroundColor: Color.pink)
            
            Button(action: {
                self.changeDuration.toggle()
            }, label: {
                Text("Action!")
            })
            .padding()
            
            VStack(spacing: 10){
                Text("Duration : Default")
                Image(systemName: "hare.fill")
                    .foregroundColor(.green)
                    .frame(width: 60, height: 60)
                    .font(.title)
                    .offset(x: self.changeDuration ? 140 : -140)
                    .animation(.easeInOut)
                
                Text("Duration : 2 Seconds")
                Image(systemName: "tortoise.fill")
                    .foregroundColor(!self.changeDuration ? .green : .red)
                    .frame(width: 60, height: 60)
                    .font(.title)
                    .offset(x: self.changeDuration ? 140 : -140)
                    .animation(.easeInOut(duration: 2))
                
                Text("Delay : ")
                Image(systemName: "car.fill")
                    .foregroundColor(.green)
                    .frame(width: 60, height: 60)
                    .font(.title)
                    .offset(x: self.changeDuration ? 140 : -140)
                    .animation(Animation.easeOut(duration: 1).delay(1))
                
                Text("repeating : autoreverses")
                Image(systemName: "ant.fill")
                    .foregroundColor(.yellow)
                    .frame(width: 60, height: 60)
                    .font(.title)
                    .offset(x: self.changeDuration ? 140 : -140)
                    .animation(
                        Animation.easeOut(duration: 1)
                            .delay(1)
                            .repeatForever(autoreverses: true)
                    )
                
                Image(systemName: "heart.fill")
                    .frame(width: 60, height: 60)
                    .foregroundColor(.red)
                    .font(.title)
                    .scaleEffect(self.changeDuration ? 5 : 1)
                    .animation(
                        Animation.easeIn(duration: 0.4)
                            .delay(0.3)
                            .repeatForever(autoreverses: true)
                    )
                    .scaleEffect(self.changeDuration ? 0.5 : 1)
                    .animation(
                        Animation.easeIn(duration: 0.4)
                            .delay(0.3)
                            .repeatForever(autoreverses: true)
                    )
            }
            .padding()
            .onAppear{
//                self.changeDuration.toggle()
            }
            
        }
    }
}

struct AniamtionParameterView_Previews: PreviewProvider {
    static var previews: some View {
        AniamtionParameterView()
    }
}
